<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 40px;
            background-color: #f5f7fa;
        }

        .container {
            max-width: 900px;
            margin: auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #3498db;
            color: white;
        }

        a.button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin-right: 10px;
        }

        a.button:hover {
            background-color: #2980b9;
        }

        a.delete-button {
            background-color: #e74c3c;
        }

        a.delete-button:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>

<div class="container">


    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>用户管理</h2>

        <!-- 搜索框 -->
        <form th:action="@{/user/list}" method="get" class="input-group w-auto">
            <input type="text" name="keyword" class="form-control" placeholder="请输入用户名"
                   th:value="${keyword != null ? keyword : ''}" />
            <button class="btn btn-primary" type="submit">搜索</button>
        </form>
    </div>

    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="u, stat : ${users}">
            <td th:text="${startNo + stat.index + 1}">序号</td>
            <td th:text="${u.username}">用户名</td>
            <td th:text="${u.phone}">手机号</td>
            <td th:text="${u.email}">邮箱</td>
            <td th:text="${u.role == 1 ? '管理员' : '普通用户'}">角色</td>
            <td th:text="${u.status == 1 ? '正常' : '禁用'}">状态</td>
            <td>
                <a class="button" href="#" onclick="openEditModal(this)"
                   th:attr="data-id=${u.id},
                    data-username=${u.username},
                    data-phone=${u.phone},
                    data-email=${u.email},
                    data-role=${u.role},
                    data-status=${u.status}">
                    编辑
                </a>
                <a class="button delete-button" th:href="@{/user/delete/{id}(id=${u.id})}"
                   onclick="return confirm('确定要删除吗？')">删除</a>
            </td>
        </tr>

        </tbody>
    </table>


</div>
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
            <a class="page-link" th:href="@{/user/list(page=${currentPage - 1})}" tabindex="-1">上一页</a>
        </li>

        <li th:each="i : ${#numbers.sequence(1, totalPages)}"
            th:classappend="${i == currentPage} ? 'active'">
            <a class="page-link" th:text="${i}" th:href="@{/user/list(page=${i})}"></a>
        </li>

        <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
            <a class="page-link" th:href="@{/user/list(page=${currentPage + 1})}">下一页</a>
        </li>
    </ul>
</nav>

<!-- 编辑用户 Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/user/update}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="editUserModalLabel">编辑用户信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="editUserId" name="id">

                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" id="editUsername" name="username" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">手机号</label>
                        <input type="text" class="form-control" id="editPhone" name="phone">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="editEmail" name="email">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">角色</label>
                        <select class="form-select" id="editRole" name="role">
                            <option value="0">普通用户</option>
                            <option value="1">管理员</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">状态</label>
                        <select class="form-select" id="editStatus" name="status">
                            <option value="1">正常</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </div>
            </form>


        </div>
    </div>
</div>
<script>
    function openEditModal(button) {
        const id = button.getAttribute('data-id');
        const username = button.getAttribute('data-username');
        const phone = button.getAttribute('data-phone');
        const email = button.getAttribute('data-email');
        const role = button.getAttribute('data-role');
        const status = button.getAttribute('data-status');

        document.getElementById('editUserId').value = id;
        document.getElementById('editUsername').value = username;
        document.getElementById('editPhone').value = phone;
        document.getElementById('editEmail').value = email;
        document.getElementById('editRole').value = role;
        document.getElementById('editStatus').value = status;

        var editModal = new bootstrap.Modal(document.getElementById('editUserModal'));
        editModal.show();
    }
</script>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS + Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
